<template>
	<view class="order-detail-info" v-if="orderInfo.typeid">
		<view class="bg"></view>
		<view class="order-type">
			<view class="type-con">
				<template v-if="orderInfo.status==0 && orderInfo.ispay!=1">
					<view class="order-title">待确认</view>
					<view class="order-text">需等待商家确认后付款</view>
					
					<view class="order-pay-info">
						<view class="left">
							<view class="price">{{globalExchangeRate}}<text class="num">{{orderInfo.pay_price}}</text></view>
							<view class="detail" v-if="!orderInfo.card_pay" @click="modelDetailShow"><text class="iconfont">&#xe67e;</text>明细</view>
						</view>
						<view v-if="orderInfo.card_pay">旅游卡抵扣</view>
						<view v-else-if="orderInfo.wallet_pay">余额支付</view>
						<view v-else>{{orderInfo.paytype_name}}</view>
					</view>
					
					<view v-if="isBtn" class="order-btn-con">
						<view class="btn" @click="cancelOrder">取消订单</view>
					</view>
				</template>
				<template v-if="orderInfo.status==0 && orderInfo.ispay==1">
					<view class="order-title">待确认</view>
					<view class="order-text">订单已支付成功，需等待商家确认，即可消费。</view>
					
					<view class="order-pay-info">
						<view class="left">
							<view class="price">{{globalExchangeRate}}<text class="num">{{orderInfo.pay_price}}</text></view>
							<view class="detail" v-if="!orderInfo.card_pay" @click="modelDetailShow"><text class="iconfont">&#xe67e;</text>明细</view>
						</view>
						<view v-if="orderInfo.card_pay">旅游卡抵扣</view>
						<view v-else-if="orderInfo.wallet_pay">余额支付</view>
						<view v-else>{{orderInfo.paytype_name}}</view>
					</view>
					
					<view v-if="isBtn" class="order-btn-con">
						<!-- #ifndef MP-TOUTIAO -->
						<view class="btn" @click="refundOrder">申请退款</view>
						<!-- #endif -->
						<!-- #ifdef MP-TOUTIAO -->
						<view class="btn">
							<zijie-pay-button :orderStatus="orderStatus" :orderId="orderInfo.ordersn"></zijie-pay-button>
						</view>
						<!-- #endif -->
					</view>
				</template>
				<template v-if="orderInfo.status==1">
					<view class="order-title">待付款</view>
					<view class="order-text" v-if="autoCloseTime">
						<text class="count-down">
							<block v-if="autoCloseTime.day > 0">{{autoCloseTime.day}}天</block>
							<block v-if="autoCloseTime.hour > 0">{{autoCloseTime.hour}}小时</block>
							<block v-if="autoCloseTime.minutes > 0">{{autoCloseTime.minutes}}分</block>
							<block v-if="autoCloseTime.seconds > 0">{{autoCloseTime.seconds}}秒</block>
						</text>
						后，订单将自动取消
					</view>
					
					<view class="order-pay-info">
						<view class="left">
							<view class="price">{{globalExchangeRate}}<text class="num">{{orderInfo.pay_price}}</text></view>
							<view class="detail" v-if="!orderInfo.card_pay" @click="modelDetailShow"><text class="iconfont">&#xe67e;</text>明细</view>
						</view>
						<view v-if="orderInfo.card_pay">旅游卡抵扣</view>
						<view v-else-if="orderInfo.wallet_pay">余额支付</view>
						<view v-else>{{orderInfo.paytype_name}}</view>
					</view>
					
					<view v-if="isBtn" class="order-btn-con">
						<view class="btn" @click="cancelOrder">取消订单</view>
						<!-- #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY -->
						<view class="btn btn-yellow" v-if="orderInfo.pay_way != '2'" @click="payOrder">立即支付</view>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<view class="btn btn-yellow" @click="payOrder">立即支付</view>
						<!-- #endif -->
					</view>
				</template>
				<template v-if="orderInfo.status==2">
					<block v-if="orderInfo.typeid == 118">
						<view class="order-title">待发货</view>
						<view class="order-text">订单支付成功，等待商家发货</view>
					</block>
					<block v-else>
						<view class="order-title">待消费</view>
						<view class="order-text">订单支付成功，请你及时出行</view>
					</block>
					
					<view class="order-pay-info">
						<view class="left">
							<view class="price">{{globalExchangeRate}}<text class="num">{{orderInfo.pay_price}}</text></view>
							<view class="detail" v-if="!orderInfo.card_pay" @click="modelDetailShow"><text class="iconfont">&#xe67e;</text>明细</view>
						</view>
						<view v-if="orderInfo.card_pay">旅游卡抵扣</view>
						<view v-else-if="orderInfo.wallet_pay">余额支付</view>
						<view v-else>{{orderInfo.paytype_name}}</view>
					</view>
					
					<view v-if="isBtn && orderInfo.refund_restriction != '1'" class="order-btn-con" >
						<block v-if="orderInfo.current_verified_num <= 0">
							<view class="btn" v-if="orderInfo.card_pay" @click="cancelReservation">取消预约</view>
							<block v-else>
								<!-- #ifndef MP-TOUTIAO -->
								<view class="btn" @click="refundOrder">申请退款</view>
								<!-- #endif -->
								<!-- #ifdef MP-TOUTIAO -->
								<view class="btn">
									<zijie-pay-button :orderStatus="orderStatus" :orderId="orderInfo.ordersn"></zijie-pay-button>
								</view>
								<!-- #endif -->
							</block>
							<view class="btn" @click="complete" v-if="orderInfo.typeid!=2">确认消费</view>
						</block>
					</view>
				</template>
				<template v-if="orderInfo.status==3">
					<view class="order-title">已关闭</view>
					<view class="order-text">订单已关闭，请重新下单</view>
					<view v-if="isBtn" class="order-btn-con">
						<view class="btn" @click="buyAgain">再次预订</view>
					</view>
				</template>
				<template v-if="orderInfo.status==6">
					<view class="order-title">退款中</view>
					<view class="order-text">您的退款申请正在审核中</view>
					
					<view class="order-pay-info">
						<view class="left">
							<view class="price">{{globalExchangeRate}}<text class="num">{{orderInfo.pay_price}}</text></view>
							<view class="detail" v-if="!orderInfo.card_pay" @click="modelDetailShow"><text class="iconfont">&#xe67e;</text>明细</view>
						</view>
						<view v-if="orderInfo.card_pay">旅游卡抵扣</view>
						<view v-else-if="orderInfo.wallet_pay">余额支付</view>
						<view v-else>{{orderInfo.paytype_name}}</view>
					</view>
					
					<view v-if="isBtn" class="order-btn-con">
						<!-- #ifndef MP-TOUTIAO -->
						<view class="btn" @click="cancelRefund">取消退款</view>
						<!-- #endif -->
						<view class="btn" @click="refundInfo">退款详情</view>
					</view>
				</template>
				<template v-if="orderInfo.status==4">
					<view class="order-title">已退款</view>
					<view class="order-text">商家同意退款申请，期待您的再次预订</view>
					
					<view class="order-pay-info">
						<view class="left">
							<view class="price">{{globalExchangeRate}}<text class="num">{{orderInfo.pay_price}}</text></view>
							<view class="detail" v-if="!orderInfo.card_pay" @click="modelDetailShow"><text class="iconfont">&#xe67e;</text>明细</view>
						</view>
						<view v-if="orderInfo.card_pay">旅游卡抵扣</view>
						<view v-else-if="orderInfo.wallet_pay">余额支付</view>
						<view v-else>{{orderInfo.paytype_name}}</view>
					</view>
					
					<view v-if="isBtn" class="order-btn-con">
						<view class="btn" @click="buyAgain">再次预订</view>
						<view class="btn" @click="refundInfo">退款详情</view>
					</view>
				</template>
				<template v-if="orderInfo.status==5">
					<view class="order-title">已完成</view>
					<view class="order-text">您的订单已消费，期待您再次预订</view>
					
					<view class="order-pay-info">
						<view class="left">
							<view class="price">{{globalExchangeRate}}<text class="num">{{orderInfo.pay_price}}</text></view>
							<view class="detail" v-if="!orderInfo.card_pay" @click="modelDetailShow"><text class="iconfont">&#xe67e;</text>明细</view>
						</view>
						<view v-if="orderInfo.card_pay">旅游卡抵扣</view>
						<view v-else-if="orderInfo.wallet_pay">余额支付</view>
						<view v-else>{{orderInfo.paytype_name}}</view>
					</view>
					
					<view v-if="isBtn" class="order-btn-con">
						
						<view class="btn" @click="buyAgain">再次预订</view>
						
						<block v-if="orderInfo.ispinlun==0">
							<view class="btn btn-yellow" v-if="orderInfo.typeid==1 && cfg_comment_line_lock==1" @click="commentOrder">我要点评</view>
							<view class="btn btn-yellow" v-if="orderInfo.typeid==2 && cfg_comment_hotel_lock==1" @click="commentOrder">我要点评</view>
							<view class="btn btn-yellow" v-if="orderInfo.typeid==3 && cfg_comment_car_lock==1" @click="commentOrder">我要点评</view>
							<view class="btn btn-yellow" v-if="orderInfo.typeid==5 && cfg_comment_spot_lock==1" @click="commentOrder">我要点评</view>
							<view class="btn btn-yellow" v-if="orderInfo.typeid==8 && cfg_comment_visa_lock==1" @click="commentOrder">我要点评</view>
							
							<block v-if="orderInfo.typeid==13 && cfg_comment_tuan_lock==1">
								<!-- #ifdef MP-TOUTIAO -->
								<rate-button class="default btn toutiao-commemt-btn"
									:order-id="orderInfo.ordersn" @init="handleToutiaoRateInit($event, orderInfo.id)"
									@success="handleToutiaoRateSuccess($event, orderInfo.id)"
									@error="handleToutiaoRateError($event, orderInfo.id)">
								</rate-button>
								<!-- #endif -->
								<!-- #ifndef MP-TOUTIAO -->
								<view class="btn btn-yellow" @click="commentOrder">我要点评</view>
								<!-- #endif -->
							</block>
							
							<view class="btn btn-yellow" v-if="orderInfo.typeid==21 && cfg_comment_malls_lock==1" @click="commentOrder">我要点评</view>
							<view class="btn btn-yellow" v-if="orderInfo.typeid==23 && cfg_comment_combination_lock==1" @click="commentOrder">我要点评</view>
							<view class="btn btn-yellow" v-if="orderInfo.typeid==104 && cfg_comment_ship_line_lock==1" @click="commentOrder">我要点评</view>
							<view class="btn btn-yellow" v-if="orderInfo.typeid==114 && cfg_comment_outdoor_lock==1" @click="commentOrder">我要点评</view>
							<view class="btn btn-yellow" v-if="orderInfo.typeid==118 && cfg_comment_techan_lock==1" @click="commentOrder">我要点评</view>
							<view class="btn btn-yellow" v-if="orderInfo.typeid==121 && cfg_comment_food_lock==1" @click="commentOrder">我要点评</view>
							<view class="btn btn-yellow" v-if="orderInfo.typeid==106 && cfg_comment_guide_lock==1" @click="commentOrder">我要点评</view>
							<view class="btn btn-yellow" v-if="orderInfo.typeid >199 && cfg_comment_tongyong_lock==1" @click="commentOrder">我要点评</view>
						</block>
												
					</view>
				</template>
				<template v-if="orderInfo.status==7">
					<view class="order-title">已完成</view>
					<view class="order-text">您的订单已消费，期待您再次预订</view>
					
					<view class="order-pay-info">
						<view class="left">
							<view class="price">{{globalExchangeRate}}<text class="num">{{orderInfo.pay_price}}</text></view>
							<view class="detail" v-if="!orderInfo.card_pay" @click="modelDetailShow"><text class="iconfont">&#xe67e;</text>明细</view>
						</view>
						<view v-if="orderInfo.card_pay">旅游卡抵扣</view>
						<view v-else-if="orderInfo.wallet_pay">余额支付</view>
						<view v-else>{{orderInfo.paytype_name}}</view>
					</view>
					
					<view v-if="isBtn" class="order-btn-con">
						<view class="btn" @click="buyAgain">再次预订</view>
					</view>
				</template>
				<template v-if="orderInfo.status==8">
					<view class="order-title">已发货</view>
					<view class="order-text">您的订单已发货，期待您再次预订</view>
					<view v-if="isBtn" class="order-btn-con">
						<!-- <view class="btn" @click="buyAgain">再次预订</view> -->
						
						<!-- #ifndef MP-TOUTIAO -->
						<view class="btn" @click="refundOrder">申请退款</view>
						<!-- #endif -->
						<!-- #ifdef MP-TOUTIAO -->
						<view class="btn">
							<zijie-pay-button :orderStatus="orderStatus" :orderId="orderInfo.ordersn"></zijie-pay-button>
						</view>
						<!-- #endif -->
						
						<view class="btn" @click="complete">确认收货</view>
					</view>
				</template>
			</view>
		</view>
		<view class="order-info" v-if="orderInfo.typeid != 198">
			<view class="title-bar">产品信息</view>
			<view class="info-con">
				
				<view class="product-title" @click="buyAgain">{{orderInfo.productname}}</view>
				
				<!-- 线路 -->
				<template v-if="orderInfo.typeid==1">
					<view class="product-datas">
						<view class="datas-item">
							<view class="datas-hd">套餐名称</view>
							<view class="datas-bd">{{orderInfo.suit_name}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">使用日期</view>
							<view class="datas-bd">{{orderInfo.usedate}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">预订人群</view>
							<view class="datas-bd">{{numberStr}}</view>
						</view>
					</view>
				</template>
				
				<!-- 酒店 -->
				<template v-else-if="orderInfo.typeid==2">
					<view class="product-datas">
						<view class="datas-item">
							<view class="datas-hd">套餐名称</view>
							<view class="datas-bd">{{orderInfo.suit_name}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">使用日期</view>
							<view class="datas-bd">{{orderInfo.usedate}} - {{orderInfo.departdate}} {{orderInfo.days}}晚</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">预订数量</view>
							<view class="datas-bd">{{orderInfo.dingnum}}</view>
						</view>
					</view>
					<view class="types-text">如需提前入住/延迟退房，请与酒店协商</view>
				</template>
				
				<!-- 租车 -->
				<template v-else-if="orderInfo.typeid==3">
					<view class="product-datas">
						<view class="datas-item">
							<view class="datas-hd">套餐名称</view>
							<view class="datas-bd">{{orderInfo.suit_name}}</view>
						</view>
						<view class="datas-item" v-if="orderInfo.usedate">
							<view class="datas-hd">使用日期</view>
							<view class="datas-bd">{{orderInfo.usedate}} - {{orderInfo.departdate}} （{{orderInfo.days}}天）</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">预订数量</view>
							<view class="datas-bd">{{orderInfo.dingnum}}</view>
						</view>
						<view class="datas-item" v-if="orderInfo.self_pickup">
							<view class="datas-hd">提车地址</view>
							<view class="address-item" @click="mapLocation">
								<view class="text">{{orderInfo.self_pickup.address}}</view>
								<view class="icon">
									<img class="img" src="https://static.member.stourweb.cn/uniapp/static/images/uni-spots-site-icon.png" alt="">
									<view class="title-text">地图</view>
								</view>
							</view>
						</view>
					</view>
				</template>
				
				<!-- 景点 -->
				<template v-else-if="orderInfo.typeid==5">
					<view class="product-datas" v-for="(item,index) in orderInfo.suits" :key="index">
						<view class="datas-item" v-if="item.suit_name">
							<view class="datas-hd">套餐名称</view>
							<view class="datas-bd">{{item.suit_name}}</view>
						</view>
						<view class="datas-item" v-if="item.usedate">
							<view class="datas-hd">游玩日期</view>
							<view class="datas-bd">{{item.usedate}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">预订数量</view>
							<view class="datas-bd">{{item.dingnum}}</view>
						</view>
					</view>	
				</template>
				
				<!-- 团购 -->
				<template v-else-if="orderInfo.typeid==13">
					<view class="product-datas">
						<view class="datas-item">
							<view class="datas-hd">套餐名称</view>
							<view class="datas-bd">{{orderInfo.productname}}</view>
						</view>
						<view class="datas-item" v-if="orderInfo.usedate">
							<view class="datas-hd">使用日期</view>
							<view class="datas-bd">{{orderInfo.usedate}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">预订数量</view>
							<view class="datas-bd">{{orderInfo.dingnum}}</view>
						</view>
					</view>
				</template>
				
				<!-- 私人定制 -->
				<template v-else-if="orderInfo.typeid==14">
					<view class="product-datas">
						<view class="datas-item" v-if="orderInfo.departure">
							<view class="datas-hd">出发地</view>
							<view class="datas-bd">{{orderInfo.departure}}</view>
						</view>
						<view class="datas-item" v-if="orderInfo.destination">
							<view class="datas-hd">目的地</view>
							<view class="datas-bd">{{orderInfo.destination}}</view>
						</view>
						<view class="datas-item" v-if="orderInfo.usedate">
							<view class="datas-hd">出发日期</view>
							<view class="datas-bd">{{orderInfo.usedate}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">预订数量</view>
							<view class="datas-bd">{{orderInfo.adultnum}}成人<block v-if="orderInfo.childnum !=0">,{{orderInfo.childnum}}儿童</block></view>
						</view>
					</view>
				</template>
				
				<!-- 邮轮 -->
				<template v-else-if="orderInfo.typeid==104">
				
					<view class="order-data">
						<view class="position-left">
							<view class="position-i"><text class="date">{{orderInfo.lineInfo.start_time}}</text> {{orderInfo.lineInfo.startcity}}</view>
							<view class="position-i"><text class="date">{{orderInfo.lineInfo.end_time}}</text> {{orderInfo.lineInfo.destcity}}</view>
						</view>
					</view>
					
					<view class="product-datas">
						<view class="datas-item">
							<view class="datas-hd">已选房型</view>
							<view class="datas-bd">{{orderInfo.lineInfo.room}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">出发时间</view>
							<view class="datas-bd">{{orderInfo.lineInfo.date}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">房间数量</view>
							<view class="datas-bd">{{orderInfo.lineInfo.dingnum}}间</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">预订人数</view>
							<view class="datas-bd">{{orderInfo.lineInfo.peoplenum}}</view>
						</view>
					</view>
					
					<view class="add-data" v-if="orderInfo.attach && orderInfo.attach.length">
						<view class="add-tit">附加产品</view>
						<view class="add-con">
							<view class="add-item" v-for="(item,index) in orderInfo.attach" :key="index" v-if="item.num>0">
								<view class="name">{{item.name}}</view>
								<view class="num">× {{item.num}}{{item.unit}}</view>
							</view>
						</view>
					</view>
				
				</template>
					
				<!-- 导游 -->
				<template v-else-if="orderInfo.typeid==106">
					<view class="product-datas">
						<view class="datas-item">
							<view class="datas-hd">预订时间</view>
							<view class="datas-bd">{{orderInfo.usedate}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">导游名称</view>
							<view class="datas-bd">{{orderInfo.guide_name}}</view>
						</view>
					</view>
				</template>
				
				<!-- 户外活动 -->
				<template v-else-if="orderInfo.typeid==114">
					<view class="product-datas">
						<view class="datas-item">
							<view class="datas-hd">套餐名称</view>
							<view class="datas-bd">{{orderInfo.suit_name}}</view>
						</view>
						<view class="datas-item" v-if="orderInfo.usedate">
							<view class="datas-hd">使用日期</view>
							<view class="datas-bd">{{orderInfo.usedate}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">预订人群</view>
							<view class="datas-bd">{{orderInfo.dingnum}}成人<block v-if="orderInfo.childnum !=0">,{{orderInfo.childnum}}儿童</block></view>
						</view>
					</view>
				</template>
				
				<!-- 特产 -->
				<template v-else-if="orderInfo.typeid==118">
					<view class="product-datas">
						<view class="datas-item">
							<view class="datas-hd">套餐名称</view>
							<view class="datas-bd">{{orderInfo.suit_name}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">预订数量</view>
							<view class="datas-bd">{{orderInfo.dingnum}}</view>
						</view>
					</view>
				</template>
								
				<!-- 其他根据实际情况填写 -->
				<template v-else>
					<view class="product-datas">
						<view class="datas-item" v-if="orderInfo.suit_name">
							<view class="datas-hd">套餐名称</view>
							<view class="datas-bd">{{orderInfo.suit_name}}</view>
						</view>
						<view class="datas-item" v-if="orderInfo.usedate">
							<view class="datas-hd">预订时间</view>
							<view class="datas-bd">{{orderInfo.usedate}}</view>
						</view>
						<view class="datas-item" v-if="orderInfo.dingnum">
							<view class="datas-hd">预订数量</view>
							<view class="datas-bd">{{orderInfo.dingnum}}</view>
						</view>
					</view>
				</template>
			
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 订单详情头部
	 * @property {Boolean} isBtn 是否显示按钮（保险订单详情页使用）
	 * @property {Boolean} typeid 用typeid区分样式
	 * 
	 */
	// #ifdef MP-TOUTIAO
	import zijiePayButton from '@/ttcomponents/DyPayButton/index'
	// #endif
	import {count_down_close_time} from '../utils/utils.js'
	// #ifdef MP-TOUTIAO
	import toutiaoRate from '@/utils/tioutiao_rate.js'
	// #endif
	import { bMapToQQMap } from '@/utils/utils.js';
	export default {
		name: 'stOrderDetailHeader',
		props: {
			status: {
				type: Number,
				default: 7
			},
			isBtn: {
				type: Boolean,
				default: true
			},
			typeid: {
				type: Number,
				default: 1
			},
			orderInfo: {
				type: Object,
				default() {
					return {}
				}
			},
			priceInfo: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		components:{
			// #ifdef MP-TOUTIAO
			zijiePayButton,
			// #endif
		},
		data() {
			return {
				autoCloseTime:'',
				numberStr:'', // 数量描述设置
				orderStatus: 1,
				cfg_comment_line_lock:0,
				cfg_comment_hotel_lock:0,
				cfg_comment_car_lock:0,
				cfg_comment_spot_lock:0,
				cfg_comment_tuan_lock:0,
				cfg_comment_malls_lock:0,
				cfg_comment_ship_line_lock:0,
				cfg_comment_outdoor_lock:0,
				cfg_comment_techan_lock:0,
				cfg_comment_food_lock:0,
				cfg_comment_guide_lock:0,
				cfg_comment_tongyong_lock:0
			};
		},
		watch:{
			orderInfo:{
				handler(val) {
					if(val.status == 1 && val.auto_close_time > 0)
					{
						this.count_down();
					}
				},
				immediate: true
			},
			priceInfo:{
				handler(val) {
					// 显示数量数据
					this.number_show();
				},
				immediate: true
			}
		},
		mounted() {
			this.cfg_comment_line_lock = uni.getStorageSync('cfg_comment_line_lock')
			this.cfg_comment_hotel_lock = uni.getStorageSync('cfg_comment_hotel_lock')
			this.cfg_comment_car_lock = uni.getStorageSync('cfg_comment_car_lock')
			this.cfg_comment_spot_lock = uni.getStorageSync('cfg_comment_spot_lock')
			this.cfg_comment_tuan_lock = uni.getStorageSync('cfg_comment_tuan_lock')
			this.cfg_comment_malls_lock = uni.getStorageSync('cfg_comment_malls_lock')
			this.cfg_comment_ship_line_lock = uni.getStorageSync('cfg_comment_ship_line_lock')
			this.cfg_comment_outdoor_lock = uni.getStorageSync('cfg_comment_outdoor_lock')
			this.cfg_comment_techan_lock = uni.getStorageSync('cfg_comment_techan_lock')
			this.cfg_comment_food_lock = uni.getStorageSync('cfg_comment_food_lock')
			this.cfg_comment_guide_lock = uni.getStorageSync('cfg_comment_guide_lock')
			this.cfg_comment_tongyong_lock = uni.getStorageSync('cfg_comment_tongyong_lock')
		},
		methods: {
			// #ifdef MP-TOUTIAO
			// 头条评价初始化
			handleToutiaoRateInit(event, order_id) {
				// const { status } = event.detail;
				switch (event.status) {
					case 2:
					case 3:
					case 4:
						toutiaoRate.success(order_id)
						this.$emit('refreshDetail');
						break;
					default:
						break;
				}
			},
			// 头条评价成功回调
			handleToutiaoRateSuccess(event, order_id) {
				// const { result } = event.detail;
				if (event.result) {
					toutiaoRate.success(order_id)
					this.$emit('refreshDetail');
				}
			},
			// 头条评价错误
			handleToutiaoRateError(event) {
				console.log(event)
			},
			// #endif
			modelDetailShow() {
				this.$emit('priceDetail')
			},
			// 取消订单
			cancelOrder() {
				this.$emit('cancelOrder');
			},
			//完成
			complete(){
				this.$emit('complete');
			},
			// 立即支付
			payOrder() {
				this.$emit('payOrder');
			},
			// 申请退款
			refundOrder() {
				this.$emit('refundOrder');
			},
			// 取消旅游卡预约
			 cancelReservation(){
				 this.$emit('cancelReservation');
			 },
			// 取消申请退款
			cancelRefund() {
				this.$emit('cancelRefund');
			},
			// 再次预订
			buyAgain() {
				this.$emit('buyAgain');
			},
			// 退款详情
			refundInfo() {
				this.$emit('refundInfo');
			},
			// 订单点评
			commentOrder() {
				this.$emit('commentOrder');
			},
			//定位
			mapLocation(){
				let location = this.orderInfo.self_pickup
				if(location.lat && location.lng ){
				let map = bMapToQQMap(location.lng, location.lat);
				uni.openLocation({
					latitude: Number(map[1]),
					longitude: Number(map[0]),
					name: location.title,
					address: location.address,
					success: function() {
				
					}
				});
				}
			},
			// 显示数量信息
			number_show(){
				let numberArr = [];
				if(this.priceInfo.price)
				{
					let people = this.priceInfo.price.people;
					for(let i in people)
					{
						let item = people[i];
						if(item.num > 0 && item.price)
						{
							let str = `${item.name}${item.num}`;
							numberArr.push(str);
						}
					}
					let numberStr = numberArr.join(',');
					this.$set(this,'numberStr',numberStr);
				}
			},
			// 待支付时倒计时
			count_down(){
				let self, time;
				clearTimeout(time);
				this.autoCloseTime = count_down_close_time(this.orderInfo.close_second, 1);
				if(this.autoCloseTime)
				{
					self = this;
					time = setTimeout(function(){  
						self.count_down();
					},1000)
					this.orderInfo.close_second--
				}else{
					this.$emit('refreshDetail');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifdef MP-TOUTIAO */
	.toutiao-commemt-btn{
		background-color: #ffc600!important;
	}
	/* #endif */
	
	.order-detail-info {
		position: relative;
		z-index: 1;
		padding: 28rpx 24rpx 0;
		margin-bottom: 24rpx;
		font-size: $uni-font-size-sm;
		.bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: 1;
			width: 100%;
			height: 260rpx;
			background: linear-gradient(to right, #5BE181 0%, #11C586 100%);
			&:after{
				content: "";
				display: block;
				width: 100%;
				height: 100%;
				background: linear-gradient(to bottom, transparent, #f6f6f6);
			}
			
		}

		.order-type {
			padding: 32rpx 24rpx 28rpx;
			margin-bottom: 20rpx;
			background-color: $uni-bg-color;
			border-radius: 20rpx;
			overflow: hidden;
			position: relative;
			z-index: 2;
			&:after{
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				z-index: 1;
				height: 98rpx;
				background: linear-gradient(360deg, rgba(255,255,255,0.28) 0%, #defce6 100%);
			}
			.type-con{
				position: relative;
				z-index: 2;
				.order-title {
					font-size: 48rpx;
					font-weight: bold;
					color: #222;
				}
				.order-text{
					font-size: $uni-font-size-sm;
					font-family: Arial, Arial;
					color: $uni-text-color-grey;
					line-height: 1.83;
					margin-top: 12rpx;
					.count-down{
						color: #ff4a50;
					}
				}
				.order-pay-info{
					@extend .justifyspacec;
					color: $uni-text-color-grey;
					font-size: 22rpx;
					margin-top: 28rpx;
					.left {
						@extend .alignItems;
						.price {
							color: #ff4a50;
							font-family: Arial, Helvetica, sans-serif;
							font-size: $uni-font-size-base;
							.num{
								font-size: 48rpx;
								font-weight: bold;
							}
						}
						.detail {
							margin-left: 14rpx;
							color: #9e9e9e;
							font-size: $uni-font-size-sm;
							.iconfont {
								margin-right: 6rpx;
								color: $uni-text-color-grey;
								font-size: $uni-font-size-base;
							}
						}
						
					}
				}
				.order-btn-con {
					@extend .displayflex;
					margin-top: 28rpx;
					text-align: center;
					.btn {
						@extend .flex1;
						box-sizing: border-box;
						height: 84rpx;
						line-height: 84rpx;
						border: 2rpx solid #e5e5e5;
						font-size: 30rpx;
						font-weight: bold;
						color: $uni-text-color-grey;
						border-radius: 42rpx;
						&:nth-child(2) {
							margin-left: 20rpx;
						}
						&.btn-yellow {
							color: $uni-text-color-inverse;
							background: linear-gradient(-90deg, #ff644e 0%, #ff8a2a 100%);
							border: none;
						}
					}
				}
			}
		}

		.order-info {
			padding: 28rpx 24rpx 20rpx;
			border-radius: 20rpx;
			background-color: $uni-bg-color;
			position: relative;
			z-index: 2;
			.title-bar{
				line-height: 1.24;
				font-size: 34rpx;
				font-weight: bold;
			}
			.info-con{
				padding-top: 40rpx;
				.product-title{
					line-height: 1.433;
					font-size: $uni-font-size-base;
					color: #222;
					font-weight: bold;
				}
			}
			.product-types{
				margin-bottom: 25rpx;
				font-size: $uni-font-size-base;
			}
			.product-datas{
				margin-top: 28rpx;
				border-bottom: 1px solid #efefef;
				&:last-child{
					border-bottom: none
				}
				.datas-item{
					@extend .displayflex;
					font-size: 26rpx;
					line-height: 1.54;
					margin-bottom: 20rpx;
					.datas-hd{
						width: 124rpx;
						color: $uni-text-color-grey;
					}
					.datas-bd{
						flex: 1;
					}
				}
			}
			.date-people-type,
			.booking-type {
				font-size: $uni-font-size-sm;
			}

			.date-people-type {
				margin-bottom: 50rpx;
				color: $uni-text-color-grey;
				font-family: "Arial";

				text {
					&:first-child {
						margin-right: 80rpx;
					}
				}
			}
			.ship-suit-name{
				font-size: $uni-font-size-base;
				margin-bottom: 10rpx;
				color: $uni-text-color-deep;
			}
			.ship-date-people-type{
				margin-bottom: 30rpx;
				color: $uni-text-color-grey;
				font-family: "Arial";
				@extend .justifyspacec
			}
			
			.order-data{
				font-size: 32rpx;
				margin-top: 24rpx;
				padding-left: 24rpx;
				position: relative;
				&:before{
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 6rpx;
					height: 63rpx;
					background: url("https://static.member.stourweb.cn/uniapp/static/images/ship-order-line-icon.jpg") no-repeat;
					background-size: contain;
				}
				.position-i{
					margin-bottom: 5rpx;
					@extend .alignItems;
					.date{
						width: 110rpx;
						font-family: Arial, Helvetica, sans-serif
					}
				}
			}
			
			.add-data{
				margin: 30rpx 0;
				.add-tit{
					font-size: 28rpx;
					color: #2dbb55;
				}
				.add-con{
					margin-top: 6rpx;
					.add-item{
						@extend .justifyspacec;
						color: #888;
						font-size: 24rpx;
						padding: 10rpx 0 0;
						.name{
							width: 70%;
							@extend .ellipse;
						}
					}
				}
			}

			

			.types-num {
				@extend .displayflex;
				margin-bottom: 30rpx;
				font-size: $uni-font-size-base;

				.name {
					margin-right: 66rpx;
				}
			}

			.date-info {
				@extend .displayflex;
				margin-bottom: 20rpx;
				text-align: center;
				font-size: $uni-font-size-base;

				.time {
					margin-top: 2rpx;
					font-size: 22rpx;
					color: $uni-text-color-grey;
				}

				.start,
				.end {
					margin: 0 16rpx;
				}

				.day {
					height: 32rpx;
					padding: 0 13rpx;
					margin: 0 30rpx;
					line-height: 32rpx;
					border-radius: 15rpx;
					font-size: $uni-font-size-mini;
					color: $uni-text-color-deep;
					border: 1rpx solid #bfbfbf;
				}
			}

			.types-text {
				font-size: $uni-font-size-mini;
				color: $uni-text-color-grey;
				padding-top: 0.4rem;
			}
		}
	}
	.customize-site{
		margin-bottom: 16rpx;
		.iconfont{
			margin: 0 16rpx;
			color: #474747;
		}
	}
	.num-price{
		margin-bottom: 18rpx;
		font-family: "Arial";
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
		.f{
			margin-right: 70rpx;
		}
	}
	.address-item{
		width: 530rpx;
		height: 116rpx;
		border-radius: 10rpx;
		background: url('https://static.member.stourweb.cn/uniapp/static/images/uni-spots-site-bg.png');
		background-size: 100% 100%;
		position: relative;
		flex: 1;
		.text{
			font-size: 24rpx;
			color: #333333;
			line-height: 38rpx;
			margin: 20rpx 90rpx 20rpx 20rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		.icon{
			position: absolute;
			right: 30rpx;
			top: 14rpx;
			bottom: 16rpx;
			.img{
				width: 48rpx;
				height: 48rpx;
			}
			.title-text{
				font-size: 22rpx;
				color: #666666;
				line-height: 38rpx;
			}
		}
	}
</style>
